<template>
	<view class="topic">
		<view class="topic-header">
			<view class="title">热门话题</view>
			<view class="more" @tap.stop.prevent="goTopicList()">更多</view>
		</view>
		<view class="topic-box">
			<view class="topic-box-1" @tap.stop.prevent="goTopic(topicList[0])">
				<view class="skew-elm1">
					<view class="skew-elm2">
						<view class="con"
							:style="'background: url('+ topicList[0].topicCoverUrl +') center center / cover no-repeat;'">
							<view class="topic-content">
								<view class="topicName onelist-hidden">{{topicList[0].topicName}}✨</view>
								<view class="topicIntroduction twolist-hidden">{{topicList[0].topicIntroduction}}</view>
								<view class="take-part-in">
									<uv-avatar-group :urls="topicList[0].userNumVO.avatarList" size="19"
										gap="0.3"></uv-avatar-group>
									<view class="num">等{{topicList[0].userNumVO.topicUserNum}}人参与</view>
								</view>
							</view>
						</view>
						<view class="mb"></view>
					</view>
				</view>
			</view>
			<view class=" topic-box-right">
				<view class="topic-box-2" @tap.stop.prevent="goTopic(topicList[1])">
					<view class="skew-elm1">
						<view class="skew-elm2">
							<view class="con"
								:style="'background: url('+ topicList[1].topicCoverUrl +') center center / cover no-repeat;'">
							</view>
						</view>
					</view>
					<view class="topic-content">
						<view class="topicName onelist-hidden">{{topicList[1].topicName}}</view>
						<view class="topicIntroduction onelist-hidden">{{topicList[1].topicIntroduction}}
						</view>
					</view>
				</view>
				<view class="topic-box-3" @tap.stop.prevent="goTopic(topicList[2])">
					<view class="topic-content">
						<view class="topicName onelist-hidden">{{topicList[2].topicName}}</view>
						<view class="topicIntroduction onelist-hidden">{{topicList[2].topicIntroduction}}
						</view>
					</view>
					<view class="skew-elm1">
						<view class="skew-elm2">
							<!-- <view class="con2" :style="'background: url('+ topicList[2].topicCoverUrl +') center center / cover no-repeat;'"></view> -->
							<view class="con"
								:style="'background: url('+ topicList[2].topicCoverUrl +') center center / cover no-repeat;'">
							</view>
							<!-- <view class="con3" :style="{'--topic-cover-url': 'url('+topicList[2].topicCoverUrl+')'}"></view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	const app = getApp();
	export default {
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		props: {
			topicList: {
				type: Array,
				default: () => {
					return []
				}
			},
		},
		methods: {
			goTopic(item) {
				let topic = JSON.stringify(item)
				uni.navigateTo({
					url: '/page_community/topic/topic?topic=' + topic,
				});
			},
			goTopicList() {
				uni.navigateTo({
					url: '/pages/index/topicList'
				});
			}

		}
	}
</script>
<style lang="scss" scoped>
	.topic {
		margin-bottom: 32rpx;

		.topic-header {
			padding: 24rpx 32rpx 0;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #222222;
				line-height: 44rpx;
				position: relative;

				&::after {
					position: absolute;
					right: -30rpx;
					top: -15rpx;
					content: '';
					width: 41rpx;
					height: 38rpx;
					background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/xing.png");
					background-repeat: no-repeat;
					background-size: cover;
					z-index: 1;
				}
			}

			.more {
				font-size: 24rpx;
				font-weight: 400;
				color: #999B9B;
				line-height: 44rpx;

				&::after {
					font-family: "dy-iconfont";
					position: relative;
					content: "\e600";
					font-size: 20rpx;
					margin-left: 10rpx;
					line-height: 40rpx;
					top: -2rpx;
					color: #999B9B;
				}
			}

		}
	}

	.topic-box {
		padding: 36rpx 32rpx 0;
		box-sizing: border-box;
		display: flex;

		.topic-box-1 {

			.skew-elm1 {
				width: 350rpx;
				height: 280rpx;
				transform-origin: bottom;
				transform: skew(0deg, 0deg) rotate(180deg) translateY(280rpx);
				overflow: hidden;
				border-radius: 0px 20rpx 40rpx 0px;
			}

			.skew-elm2 {
				width: 350rpx;
				height: 280rpx;
				transform-origin: bottom;
				transform: skew(-8deg, 0deg);
				overflow: hidden;
				border-radius: 20rpx 0px 0px 40rpx;
			}

			.con {
				width: 350rpx;
				height: 280rpx;
				transform-origin: bottom;
				transform: skew(8deg, 0deg) rotate(180deg) translateY(280rpx);
				position: relative;

				&::after {
					position: absolute;
					left: 0;
					top: 0;
					display: block;
					content: '';
					width: 350rpx;
					height: 280rpx;
					background: rgba(0, 0, 0, .3);
					z-index: 1;
				}

				.topic-content {
					box-sizing: border-box;
					padding: 36rpx 46rpx 32rpx 36rpx;
					position: relative;
					height: 280rpx;
					z-index: 2;

					.topicName {
						font-size: 32rpx;
						font-weight: 900;
						color: #FFFFFF;
						line-height: 40rpx;
					}

					.topicIntroduction {
						font-size: 26rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 40rpx;
						margin-top: 17rpx;
					}

					.take-part-in {
						position: absolute;
						bottom: 32rpx;
						left: 36rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
						line-height: 30rpx;
						display: flex;
						align-items: center;

						/deep/.uv-avatar__image {
							border: 2rpx solid #FFFFFF;
							flex-shrink: 0;
						}

						.num {
							margin-left: 8rpx;
						}
					}
				}
			}
		}

		.topic-box-right {
			.topic-box-2 {
				position: relative;

				.topic-content {
					box-sizing: border-box;
					padding: 23rpx 20rpx 0 48rpx;
					width: 344rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;

					.topicName {
						font-size: 32rpx;
						font-weight: 900;
						color: #FFFFFF;
						line-height: 40rpx;
					}

					.topicIntroduction {
						font-size: 26rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 40rpx;
						margin-top: 8rpx;
					}
				}

				.skew-elm1 {
					width: 344rpx;
					height: 132rpx;
					transform-origin: bottom;
					// transform: skew(8deg, 0deg);
					transform: skew(-8deg, 0deg) rotateY(180deg);
					overflow: hidden;
					border-radius: 0px 20rpx 20rpx 0px;
				}

				.skew-elm2 {
					width: 344rpx;
					height: 132rpx;
					transform-origin: bottom;
					transform: skew(-8deg, 0deg);
					overflow: hidden;
					border-radius: 20rpx 0px 0px 20rpx;
				}

				.con {
					width: 344rpx;
					height: 132rpx;
					// transform-origin: bottom;
					// transform: rotateY(180deg);
					position: relative;

					&::after {
						position: absolute;
						left: 0;
						top: 0;
						display: block;
						content: '';
						width: 368rpx;
						height: 132rpx;
						background: rgba(0, 0, 0, .3);
						z-index: 1;
					}
				}
			}

			.topic-box-3 {
				margin-top: 19rpx;
				position: relative;

				.topic-content {
					box-sizing: border-box;
					padding: 23rpx 20rpx 0 48rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 3;
					width: 368rpx;

					.topicName {
						font-size: 32rpx;
						font-weight: 900;
						color: #FFFFFF;
						line-height: 40rpx;
					}

					.topicIntroduction {
						font-size: 26rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 40rpx;
						margin-top: 8rpx;
					}
				}

				.skew-elm1 {
					width: 368rpx;
					height: 132rpx;
					transform-origin: bottom;
					transform: skew(-8deg, 0deg) rotateY(180deg) translateX(20rpx);
					overflow: hidden;
					border-radius: 0px 20rpx 20rpx 0px;
				}

				.skew-elm2 {
					width: 368rpx;
					height: 132rpx;
					transform-origin: bottom;
					transform: skew(-8deg, 0deg);
					overflow: hidden;
					border-radius: 20rpx 0px 0px 20rpx;

				}

				.con {
					width: 368rpx;
					height: 132rpx;
					// transform-origin: bottom;
					// transform: rotateY(360deg);
					position: relative;

					&::after {
						position: absolute;
						left: 0;
						top: 0;
						display: block;
						content: '';
						width: 368rpx;
						height: 132rpx;
						background: rgba(0, 0, 0, .3);
						z-index: 1;
					}


				}
			}
		}
	}
</style>